<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<% pageContext.setAttribute("path",request.getContextPath()); %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>员工列表</title>

<!-- 
不以/开始的是相对路径，以当前资源的路径为基准
以/开始，以服务器的路径为标准(http://localhost:8080),需要加上项目名
 -->
<script type="text/javascript" src="${path}/static/js/jquery-1.12.4.min.js"></script>
<link href="${path}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="${path}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
	<!-- 显示的页面 -->
	<div class="container">
		<!-- 标题 -->
		<div class="row">
			<div class="col-md-12">
				<h1>SSM-CRUD</h1>
			</div>
		</div>
		
		<!-- 按钮 -->
		<div class="row">
			<div class="col-md-4 col-md-offset-8">
				<button class="btn btn-primary">新增</button>
				<button class="btn btn-danger">删除</button>
			</div>
		</div>
		
		<!-- 表格数据 -->
		<div class="row">
			<div class="col-md-12">
				<table class="table table-hover">
					<tr>
						<th>#</th>
						<th>empName</th>
						<th>gender</th>
						<th>email</th>
						<th>deptName</th>
						<th>操作</th>
					</tr>
					
					<c:forEach items="${pageInfo.list}" var="emp">
						<tr>
							<th>${emp.empId }</th>
							<th>${emp.empName }</th>
							<c:if test="${emp.gender=='m' }">
								<th>男</th>
							</c:if>
							<c:if test="${emp.gender=='f' }">
								<th>女</th>
							</c:if>
							<th>${emp.email }</th>
							<th>${emp.department.deptName }</th>
							<th>
								<button class="btn btn-primary btn-sm">
									<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
								</button>
								<button class="btn btn-danger btn-sm">
									<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
								</button>
							</th>
						</tr>
					</c:forEach>
				</table>
			</div>
		</div>
		
		<!-- 分页信息 -->
		<div class="row">
			<!-- 分页文字信息 -->
			<div class="col-md-6">
				当前${pageInfo.pageNum }页,总共${pageInfo.pages }页,总${pageInfo.total }条记录
			</div>
			<!-- 分页条信息 -->
			<div class="col-md-6">
				<nav aria-label="Page navigation">
					  <ul class="pagination">
					  	<li><a href="${path}/emps?pn=1">首页</a></li>
					  	
					  	<c:if test="${pageInfo.hasPreviousPage }">
						  	<li>
						      <a href="${path}/emps?pn=${pageInfo.pageNum-1}" aria-label="Previous">
						        <span aria-hidden="true">&laquo;</span>
						      </a>
						    </li>
					  	</c:if>
					   
					    
					    <c:forEach items="${pageInfo.navigatepageNums}" var="page_Num">
					    	<c:if test="${page_Num==pageInfo.pageNum }">
					    		<li class="active"><a href="#">${page_Num }</a></li>
					    	</c:if>
					    	
					    	<c:if test="${page_Num!=pageInfo.pageNum }">
					    		<li><a href="${path}/emps?pn=${page_Num}">${page_Num }</a></li>
					    	</c:if>
					    </c:forEach>
					    
					    <c:if test="${pageInfo.hasNextPage }">
						    <li>
						      <a href="${path}/emps?pn=${pageInfo.pageNum+1}" aria-label="Next">
						        <span aria-hidden="true">&raquo;</span>
						      </a>
						    </li>
					    </c:if>
					    
					    
					    <li><a href="${path}/emps?pn=${pageInfo.pages}">末页</a></li>
					  </ul>
				</nav>
			</div>
		</div>
	</div>
</body>
</html>